<template>
    <div class="content">
        <el-row shadow="never" style="margin-top: 20px" id="ful_base">
            <!--头部-->
            <div class="ful_info_head">
                <span style="text-align: left;">小程序</span>
                <span>小程序基本信息</span>
            </div>
            <el-row style="margin-top: 26px" id="audit-log">
                <p style="text-align: left;margin-bottom:28px;color:#464c5b;font-size:14px;font-weight:700">审核信息</p>
                <el-table :data="audit" stripe>
                    <el-table-column label="更新时间" align="center" header-align="center">
                        <template slot-scope="scope">
                            {{scope.row.updated_at}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="auditid" label="审核ID" align="center" header-align="center"></el-table-column>
                    <el-table-column prop="user_version" label="版本" align="center" header-align="center"></el-table-column>
                    <el-table-column prop="category" label="服务类目" align="center" header-align="center"></el-table-column>
                    <el-table-column prop="status" label="状态" align="center" header-align="center"></el-table-column>
                    <el-table-column label="说明" align="center" header-align="center">
                        <template slot-scope="scope">
                            <span v-html="scope.row.remark"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" header-align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="release" v-if="scope.row.doRelease">发布</el-button>
                            <el-button type="text" @click="undoCodeAudit" v-else-if="scope.row.undoCodeAudit">撤销</el-button>
                            <el-button type="text" @click="undoRelease" v-else-if="scope.row.release">回退</el-button>
                            <el-button type="text" v-else>-</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form ref="form" style="margin: 20px 1px 0 1px" label-width="117px" label-position="right">
                        <p class="ful_info_base">
                            基本信息
                        </p>
                        <el-form-item label="名称">
                            {{wxa.nick_name}}
                        </el-form-item>
                        <el-form-item label="AppID(小程序ID)">
                            {{wxa.authorizer_appid}}
                        </el-form-item>
                        <el-form-item label="小程序码">
                            <el-row>
                                <el-col :span="6" class="ful_scan_code">
                                    <div style="width: 150px;text-align: center">
                                        查看小程序
                                    </div>
                                    <img style="width: 150px;height: 150px;" :src="getAppTokenUrl('/app/home/wxa/code/getWxaQrcode')" />
                                </el-col>
                                <el-col :span="6">
                                    <div style="width: 150px;text-align: center">
                                        查看小程序数据
                                    </div>
                                    <img style="width: 150px;height: 150px;" src="/assets/zhushou.png" />
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="主体信息">
                            {{wxa.principal_name}}
                        </el-form-item>
                        <el-form-item label="小程序介绍">
                            {{wxa.signature}}
                        </el-form-item>
                        <el-form-item label="授权信息">
                            <el-row>
                                <el-col :span="8">
                                    <div>账号管理权限</div>
                                    <div>开发管理与数据分析权限</div>
                                    <div>客服消息管理权限</div>
                                    <div>开放平台账号管理权限</div>
                                </el-col>
                                <el-col :span="4">
                                    <div>
                                        <i class="el-icon-circle-check" style="font-size:20px;color:green" v-show="wxa.func_infos.funcscope_category_17"></i>
                                        <i class="el-icon-circle-close" style="font-size:20px;color:red" v-show="!wxa.func_infos.funcscope_category_17"></i>
                                    </div>
                                    <div>
                                        <i class="el-icon-circle-check" style="font-size:20px;color:green" v-show="wxa.func_infos.funcscope_category_18"></i>
                                        <i class="el-icon-circle-close" style="font-size:20px;color:red" v-show="!wxa.func_infos.funcscope_category_18"></i>
                                    </div>
                                    <div>
                                        <i class="el-icon-circle-check" style="font-size:20px;color:green" v-show="wxa.func_infos.funcscope_category_19"></i>
                                        <i class="el-icon-circle-close" style="font-size:20px;color:red" v-show="!wxa.func_infos.funcscope_category_19"></i>
                                    </div>
                                    <div>
                                        <i class="el-icon-circle-check" style="font-size:20px;color:green" v-show="wxa.func_infos.funcscope_category_25"></i>
                                        <i class="el-icon-circle-close" style="font-size:20px;color:red" v-show="!wxa.func_infos.funcscope_category_25"></i>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="danger" size="small" @click="getCreateWxaRedirectUrl()" round style="margin-top: 50px">重新授权</el-button>
                                    <el-popover trigger="hover" placement="top">
                                        <div style="width: 260px;font-size:12px">
                                            <p style="margin-top: 6px">如果在授权过程中出现部分权限无法勾选的问题</p>
                                            <p>请按照如下步骤解决</p>
                                            <el-steps direction="vertical" style="margin-top: 20px" id="step">
                                                <el-step title="登录微信小程序后台(mp.weixin.qq.com)"></el-step>
                                                <el-step title="找到设置 => 第三方授权管理"></el-step>
                                                <el-step title="全部点击停止授权"></el-step>
                                                <el-step title="再将小程序授权给我们"></el-step>
                                            </el-steps>
                                        </div>
                                        <i class="el-icon-question" slot="reference" style="line-height: 12px;font-size:24px;float: right;margin-top: 60px;cursor:pointer;color:#a2a2a2"></i>
                                    </el-popover>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-row>
    </div>
</template>
<script>
import moment from "moment";
export default {
    data() {
        return {
            audit: [],
            wxa: {
                nick_name: "",
                head_img: "",
                auto_update: true,
                qrcode_url: "",
                signature: "",
                principal_name: "",
                debug: false,
                func_infos: {}
            },
            copyright: ""
        };
    },
    async asyncData({ app, query, redirect }) {
        let data = {};

        const wxa = await app.$axios.$get(`/api/app/home/base/getWxaInfo`);
        if (wxa && wxa.errmsg === "ok") {
            if (wxa.data.func_info) {
                let func_info = wxa.data.func_info
                    ? JSON.parse(wxa.data.func_info)
                    : {};
                let func_infos = {};
                for (let key in func_info) {
                    func_infos[
                        `funcscope_category_${
                            func_info[key].funcscope_category.id
                        }`
                    ] = true;
                }
                wxa.data.func_infos = func_infos;
            } else {
                wxa.data.func_infos = {
                    funcscope_category_17: false,
                    funcscope_category_18: false,
                    funcscope_category_19: false,
                    funcscope_category_25: false
                };
            }
            data.wxa = wxa.data;
        } else {
            redirect("/app/dashboard");
        }
        return data;
    },
    async mounted() {
        this.copyright = this.getCoryright();
        this.getAuditInfo();
    },
    methods: {
        getCreateWxaRedirectUrl() {
            const redirect = this.getAppTokenUrl(
                `http://api.doodooke.com/app/home/wxa/public/loginReferer?redirect=${encodeURIComponent(
                    `http://www.${this.getCoryright()}/app/apps`
                )}`
            );
            window.open(redirect);
        },
        async getAuditInfo() {
            const latestAuditstatus = await this.$axios.$get(
                "/api/app/home/wxa/code/latestAudit"
            );
            if (
                latestAuditstatus.errmsg === "ok" &&
                latestAuditstatus.data.errmsg === "ok"
            ) {
                let status = "";
                if (latestAuditstatus.data.status === 0) {
                    status = "审核成功";
                }
                if (latestAuditstatus.data.status === 1) {
                    status = "审核失败";
                }
                if (latestAuditstatus.data.status === 2) {
                    status = "正在审核";
                }

                let remark = "-";
                if (latestAuditstatus.data.status === 1) {
                    remark = latestAuditstatus.data.reason;
                }

                this.audit = [
                    {
                        updated_at: latestAuditstatus.data.updated_at
                            ? moment(latestAuditstatus.data.updated_at).format(
                                  "YYYY-MM-DD HH:mm:ss"
                              )
                            : "-",
                        auditid: latestAuditstatus.data.auditid,
                        user_version:
                            latestAuditstatus.data.user_version || "-",
                        category: latestAuditstatus.data.audit_item
                            ? JSON.parse(latestAuditstatus.data.audit_item)[0]
                                  .first_class
                            : "-",
                        status: status,
                        doRelease:
                            latestAuditstatus.data.status === 0 &&
                            latestAuditstatus.data.release === 0
                                ? true
                                : false,
                        release: latestAuditstatus.data.release,
                        undoCodeAudit: latestAuditstatus.data.status === 2,
                        remark: remark
                    }
                ];
            }
        },
        async release() {
            const release = await this.$axios.$get(
                "/api/app/home/wxa/code/release"
            );
            if (release.data.errmsg === "ok") {
                location.reload();
            }
        },
        async undoCodeAudit() {
            const audit = await this.$axios.$get(
                "/api/app/home/wxa/code/undoCodeAudit"
            );
            if (audit.data.errmsg === "ok") {
                location.reload();
            }
        },
        async undoRelease() {
            const audit = await this.$axios.$get(
                "/api/app/home/wxa/code/revertcoderelease"
            );
            if (audit.data.errmsg === "ok") {
                location.reload();
            }
        }
    }
};
</script>
<style scoped>
.content {
    width: 1200px;
    margin: 40px auto 0;
    border: 1px solid #ebeef5;
    padding: 2px 44px 60px;
    background-color: #fff;
}

.content .wrap {
    border-top: 1px solid #ebebeb;
    margin-top: 20px;
    padding: 30px 150px;
}

/*修改样式*/

/*小程序样式基本信息  头部*/

.ful_info_head {
    height: 80px;
    line-height: 80px;
    margin: -16px 0 0;
    border-bottom: 1px solid rgba(161, 161, 161, 0.1);
}

.ful_info_head span:first-child {
    font-size: 18px;
    color: #222222;
    margin-right: 16px;
}

.ful_info_head span:last-child {
    font-size: 12px;
    color: #707682;
    margin-top: -2px;
}

/*基本信息*/

.ful_info_base {
    padding: 20px 0;
    color: #464c5b;
    font-size: 14px;
    font-family: PingFangSC-Medium;
    font-weight: 700;
}

.ful_scan_code {
    margin-left: -40px;
}
</style>
